<template>
	<uni-header title="算力"></uni-header>
	<view class="header">
		<image class="bg" src="../../static/myPower-icon.png" mode=""></image>
		<view class="content" style="height: 212rpx;">
			<text class="income" style="margin-bottom: 20rpx;">算力</text>
			<text class="income-power">0T</text>

		</view>
		
	</view>
	<text class="title">购买明细</text>
	<view class="list">
		<!-- <view class="item" v-for="(item,index) in 10">
			<view class="">
				<view class="left">
					<text class="label">家庭云算力</text>
					<text class="due" v-if="index%2">未到期</text>
					<text class="due redeemable" v-else>可赎回</text>
				</view>
				<text class="time">2023-11-23 10:23:34</text>
			</view>
			<text class="desc">+¥300.00</text>
		</view> -->
		<uni-empty></uni-empty>
	</view>


</template>

<script setup>

</script>

<style lang="scss" scoped>
	.list {
		padding: 0 32rpx;

		.item {
			width: 686rpx;
			height: 156rpx;
			border-bottom: 2rpx solid #F2F4FA;
			display: flex;
			align-items: center;
			justify-content: space-between;

			view {
				.left{
					display: flex;
					align-items: center;
					.due{
						display: block;
						margin-left: 8rpx;
						width: 88rpx;
						height: 32rpx;
						border-radius: 4rpx;
						line-height: 32rpx;
						text-align: center;
						font-size: 24rpx;
						color: #FFA424;
						border: 2rpx solid rgba(255,164,36,0.45);
					}
					.redeemable{
						border: 2rpx solid rgba(30,83,231,0.45);
						color: #1E53E7;
					}
				}
				.label {	
					color: #181D29;
					font-size: 32rpx;
					display: block;
				}

				.time {
					display: block;
					margin-top: 8rpx;
					font-size: 24rpx;
				}
			}

			.desc {
				color: #F53B47;
				font-size: 32rpx;
			}
		}
	}

	.header {
		width: 100%;
		height: 212rpx;
		position: relative;
		overflow: hidden;
	}

	.bg {
		display: block;
		width: 686rpx;
		height: 212rpx;
		position: absolute;
		left: 32rpx;
	}

	.title {
		color: #181D29;
		display: block;
		margin: 32rpx;
		font-weight: 500;
		font-size: 36rpx;
	}

	.content {
		position: relative;
		padding: 0 64rpx;
		height: 148rpx;
		display: flex;
		// align-items: center;
		flex-direction: column;
		justify-content: center;
		// background: red;
	}

	.income {
		display: block;
		color: #fff;
		font-size: 24rpx;
		// margin:32rpx 0 15rpx 32rpx;
	}

	.income-power {
		color: #fff;
		font-size: 64rpx;
		font-weight: 700;
		display: block;
		// margin:0 0 15rpx 32rpx;
	}
</style>
